<template>
  <div class="box">
    <div class="title">{{$t('app.title')}}</div>
    <div class="subTitle">{{$t('app.subTitle')}}</div>
    <div class="formTitle">系统登录</div>
    <a-form class="form" :form="form" @submit="handleSubmit">
      <a-form-item class="formItem">
        <a-input
          class="input"
          v-decorator="[
          'user_name',
          {rules: [{ required: true, message: '用户名不能为空!' }]}
        ]"
          placeholder="请输入您的用户名"
        >
          <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)" />
        </a-input>
      </a-form-item>
      <a-form-item class="formItem">
        <a-input
          class="input"
          v-decorator="[
          'pass_word',
          {rules: [{ required: true, message: '密码不能为空!' }]}
        ]"
          type="password"
          placeholder="请输入您的密码"
        >
          <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
        </a-input>
      </a-form-item>
      <a-form-item>
        <div style="float:right;">
          <a class="login-form-forgot" href>忘记密码</a>
          <a style="margin-left:16px;" class="login-form-forgot" href>注册</a>
        </div>
        <a-checkbox
          style="float:left;"
          v-decorator="[
          'remember',
          {
            valuePropName: 'checked',
            initialValue: true,
          }
        ]"
        >自动登录</a-checkbox>
      </a-form-item>
      <a-form-item>
        <a-button class="btn" type="primary" html-type="submit">登录</a-button>
      </a-form-item>
    </a-form>
    <div class="footer">
      <div>
        <a href>友情链接</a>
        <a href>版权说明</a>
        <a href>用户协议</a>
      </div>
      <div>Copyright &copy; 2019 杭州软雅科技提供支持</div>
    </div>
  </div>
</template>
<style scoped>
.formItem {
  text-align: left;
}
.footer {
  position: fixed;
  bottom: 0px;
  height: 88px;
  left: 0px;
  right: 0px;
  color: #999;
  line-height: 38px;
}
.footer a {
  display: inline-block;
  padding: 0 12px;
}
.btn {
  width: 100%;
  height: 40px;
  line-height: 40px;
}
.input {
  height: 40px;
  background: #fff;
}
.form {
  width: 360px;
  margin-left: auto;
  margin-right: auto;
}
.formTitle {
  font-size: 14px;
  color: #096dd9;
  padding-left: 18px;
  padding-right: 18px;
  border-bottom: 2px solid #40a9ff;
  height: 42px;
  width: 120px;
  margin-left: auto;
  margin-right: auto;
  line-height: 42px;
  margin-bottom: 36px;
}
.box {
  background-image: url("../assets/svg/loginBg.svg");
  background-color: #f0f2f5;
  height: 100%;
  width: 100%;
  padding: 80px;
  text-align: center;
}
.title {
  text-align: center;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 600;
  font-size: 33px;
  font-family: Avenir, "Helvetica Neue", Arial, Helvetica, sans-serif;
}
.subTitle {
  margin-top: 12px;
  margin-bottom: 40px;
  color: rgba(0, 0, 0, 0.45);
  font-size: 14px;
}
</style>

<script>
import cookie from "js-cookie";
export default {
  data() {
    return {
      form: this.$form.createForm(this)
    };
  },
  mounted() {
    let domain = cookie.get("__domain");
    if (!domain) {
      cookie.set(
        "__domain",
        "ya-soft.com".replace(".", "_").replace("-", "__")
      );
    }
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields(async (err, values) => {
        if (!err) {
          delete values.remember; //todo
          let result = await this.$post("/system/user/login", values);
          if (result.error) return;
          cookie.set("__ya", result.data.__ya, { expires: 8 });
          this.$router.push("/");
        }
      });
    }
  }
};
</script>
